<template>
	<view>
		<view class="comments-content" v-for="item in commentList" :key="item.comment_id">
			<comment-box :comments="item"></comment-box>
		</view>
		<uni-load-more v-if="commentList.length === 0 || commentList.length > 2" iconType="snow" :status="loading"></uni-load-more>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				commentList: [],
				article_id: '',
				pageSize: 3,
				page: 1,
				loading: 'loading'
			};
		},
		onLoad(query) {
			this.article_id = query.id
			this.getComments()
		},
		// 页面触底的生命周期函数
		onReachBottom() {
			if(this.loading === 'noMore') return
			this.page++
			this.getComments()
		},
		methods: {
			getComments() {
				this.$api.get_comments({
					article_id: this.article_id,
					pageSize: this.pageSize,
					page: this.page
				}).then(res => {
					const { data } = res
					if(data.length === 0) {
						this.loading = 'noMore'
						return
					}
					// 对象复制
					let oldFormData = JSON.parse(JSON.stringify(this.commentList))
					oldFormData.push(...data)
					this.commentList = oldFormData
					console.log(res);
				})
			}
		}
	}
</script>

<style lang="scss">
	.comments-content{
		padding: 0 15px;
		padding-bottom: 10px;
	}
</style>
